<template>
	<!-- 优选贷 -->
	<view class="l-bigbox">
		<!-- 头部蓝色背景哪里 -->
		<view class="l-header-bj">
			<view class="l-header-wuyong"></view>
			<view class="l-h-content ">
				<view class="l-h-c">
					<view class="l-h-c-a">
						<view class="l-h-c-1"> 小雨点<text class="l-h-c-1-1">合作平台</text></view>
					</view>
					
					<view class="l-h-c-b">
						<view class="l-h-c-2">保持良好的 <text class="l-h-c-2-1">信用习惯</text></view>
					</view>
					
				
					<view class="l-h-c-1-1">
						珍惜个人信用
					</view>
					
				</view>
				<view class="l-h-left">

				</view>
			</view>
		</view>
		<view class="wuyong"></view>
		<!-- 可用js动态渲染 l-center使最外面的大盒子 -->
		<view class="l-center">
			<!-- 里面的可动态生成的盒子 -->
			<navigator :url="item.url" v-for="item in li" :key="item._id">
				<view class="l-c-content">
					<view class="l-c-c-a">
						<view class="l-c-c-a-img">
							<image :src="item.img"></image>&nbsp;{{item.name}}
						</view>
						<view class="l-c-c-a-mix">
							{{item.money}}
						</view>
						<view class="l-c-c-a-mix-text">
							{{item.max}}（元）
						</view>
					</view>
					<view class="l-c-c-b">
						<view class="l-c-c-b-1" style="color: white;">
							{{item.nav}}
						</view>
						<view class="l-c-c-a-mix">
							{{item.cale}}
						</view>
						<view class="l-c-c-a-mix-text">
							{{item.min}}
						</view>
					</view>
					<view class="l-c-c-c">
						<navigator url="/pages/loansSubpage/loansSubpage">
							<button class="lcccb" type="default">去申请</button>
						</navigator>
					</view>
				</view>

			</navigator>
			<!-- center结束 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				li: [{
						_id: 1,
						name: "乐花生活",
						nav: "下载率高",
						money: "5000",
						cale: "24.00%",
						max: "最高可借额度",
						min: "最低年化率",
						url: "/pagesB/loansSubpage/loansSubpage",
						img: "/static/image/luohua.png"
					},
					{
						_id: 2,
						name: "乐花生活",
						nav: "下载率高",
						money: "5000",
						cale: "24.00%",
						max: "最高可借额度",
						min: "最低年化率",
						url: "/pagesB/loansSubpage/loansSubpage",
						img: "/static/image/luohua.png"
					}
				]
			}
		},
		methods: {

		}
	}
</script>
<style scoped>
	page {
		background-color: #F8F7F7;
	}
</style>
<style lang="scss" scoped>
	.l-bigbox {
		background-color: #F8F7F7;
		height: 100vh;
	}

	.l-header-bj {
		width: 750rpx;
		background-color: #1778E6;
		height: 170rpx;
		margin: 0 auto;
	}

	.l-header-wuyong {
		width: 670rpx;
		height: 34rpx;
	}

	.l-h-content {
		width: 670rpx;
		height: 264rpx;
		background: #FFFFFF;
		margin: 0 auto;
		border-radius: 12rpx;

		display: flex;
	}

	.l-h-c {
		width: 400rpx;
		// width: 590rpx;
		height: 220rpx;

		margin-left: 40rpx;
	}

	.l-h-left {
		width: 160rpx;
		height: 160rpx;
		margin-top: 38rpx;
		margin-left: 30rpx;
		background-image: url(../../static/image/icon_dz.png);
		// border: 1rpx dashed gray;
	}

	.l-h-c-a {
		margin-top: 28rpx;
		margin-bottom: 20rpx;
	}

	.l-h-c-1 {
		color: #323232;
		font-size: 32rpx;
		line-height: 44rpx;
	}

	.l-h-c-1-1 {
		color: #B2B2B2;
		font-size: 28rpx;
		line-height: 44rpx;
	}

	.l-h-c-2 {
		font-size: 40rpx;
		line-height: 44rpx;
		color: #323232;
	}

	.l-h-c-2-1 {
		font-size: 40rpx;
		line-height: 44rpx;
		color: #007AFF;
		margin-left: 5rpx;
	}

	.l-h-c-b {
		margin-bottom: 30rpx;
	}

	.wuyong {
		width: 100rpx;
		height: 154rpx;
	}

	.l-center {
		width: 670rpx;
		margin: 0 auto;
	}

	.l-c-content {
		width: 670rpx;
		height: 220rpx;
		background: #FFFFFF;

		border-radius: 12rpx;
		display: flex;
		margin-bottom: 24rpx;
	}

	.l-c-c-a {
		width: 220rpx;
		height: 220rpx;

		margin-left: 20rpx;

	}

	.l-c-c-a-img {
		margin-top: 26rpx;
		height: 50rpx;
		width: 220rpx;
		font-size: 32rpx;
		margin-bottom: 28rpx;

		image {
			height: 48rpx;
			width: 48rpx;
			vertical-align: middle;
			margin-right: 20rpx;
		}
	}

	.l-c-c-a-mix {
		font-size: 48rpx;
		color: #FF3030;
		line-height: 44rpx;
	}

	.l-c-c-a-mix-text {
		font-size: 20rpx;
		font-weight: 300;
		line-height: 44rpx;
		color: #999999;
	}

	.l-c-c-b {
		width: 220rpx;
		height: 220rpx;
		color: white;
	}

	.l-c-c-b-1 {
		width: 110rpx;
		height: 36rpx;
		background: #8EC1F9;
		font-size: 20rpx;
		text-align: center;
		line-height: 36rpx;
		margin-top: 26rpx;
		margin-bottom: 40rpx;
		color: white;
	}

	.l-c-c-c {
		width: 170rpx;
		height: 220rpx;
		border: 1rpx solid;
		font-size: 32rpx;
		color: white;

	}

	.lcccb {
		margin-top: 100rpx;
		width: 168rpx;
		height: 58rpx;
		background: #007AFF;
		line-height: 58rpx;
		border-radius: 30rpx;
		color: white;
		font-size: 24rpx;
		font-weight: bolder;
	}
</style>
